<template>
  <ul class="appList">
    <li v-for="(item, index) in list" :key="index">
      <img :src="item.author.avatar_url" alt="" />
      <i>{{ item.top ? "置顶" : obj[item.tab] || "yyds" }}</i>
      <section>
        <p>{{ item.title }}</p>
        <p>{{ item.reply_count }}/{{ item.visit_count }}</p>
      </section>
      <span>{{timeFilter(item.last_reply_at)}}</span>
    </li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props: {
    list: Array,
  },
  setup() {
    const data = reactive({
      obj: {
        ask: "问答",
        share: "分享",
        job: "招聘",
        good: "精华",
      },
    });

    const timeFilter = (val) => {
    //   console.log(val);
      let result;
      let timePublish = new Date(val); // 传入的时间
    //   console.log(timePublish);
      let timeNow = new Date(); // 现在的时间
      let minute = 1000 * 60;
      let hour = minute * 60;
      let day = hour * 24;
      let month = day * 30;
      let year = month * 12;
      let diffValue = timeNow - timePublish; // 时间相差的值，是毫秒
      let diffMonth = diffValue / month;
      let diffWeek = diffValue / (7 * day);
      let diffDay = diffValue / day;
      let diffHour = diffValue / hour;
      let diffMinute = diffValue / minute;
      let diffYear = diffValue / year;
      if (diffValue < minute) {
        result = "刚刚";
      } else if (diffYear > 1) {
        result = parseInt(diffYear) + "年前";
      } else if (diffMonth > 1) {
        result = parseInt(diffMonth) + "月前";
      } else if (diffWeek > 1) {
        result = parseInt(diffWeek) + "周前";
      } else if (diffDay > 1) {
        result = parseInt(diffDay) + "天前";
      } else if (diffHour > 1) {
        result = parseInt(diffHour) + "小时前";
      } else if (diffMinute > 1) {
        result = parseInt(diffMinute) + "分钟前";
      }
      return result;
    };

    return {
      ...toRefs(data),
      timeFilter,
    };
  },
};
</script>
<style lang="scss" scoped>
.appList {
  li {
    display: flex;
    font-size: 14px;
    padding: 4px 10px;
    border-bottom: 1px solid #e9e9e9;
    align-items: center;
    img {
      height: 30px;
      width: 30px;
    }
    i {
      margin: 0 5px;
      background: #e9e9e9;
      height: 20px;
      font-size: 12px;
      padding: 1px 6px;
    }
    section {
      flex: 1;
    }
  }
}
</style>